<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<p>This tests caret movement through an inline table.  There should be visual
positions before and after the inline table, as if it were an image. The caret
shouldn't skip across the table, but should enter it (unless we later decide
that we don't want this behavior).</p>
<div id="sample" contenteditable>
before<table border="1" style="display: inline-table">
<tr><td id="one">one</td><td>two</td><td>three</td></tr>
<tr><td>four</td><td>five</td><td>six</td></tr>
<tr><td>seven</td><td>eight</td><td id="nine">nine</td></tr>
</table>after
</div>
<div id="log"></div>
<script>
test(function() {
    var selection = window.getSelection();
    var sample = document.getElementById('sample');
    selection.collapse(sample, 1);
    selection.modify('move', 'forward', 'character');

    var anchor = document.getElementById('one').firstChild;
    assert_equals(selection.anchorNode, anchor, 'anchorNode');
    assert_equals(selection.anchorOffset, 0, 'anchorOffset');
    assert_equals(selection.focusNode, anchor, 'focusNode');
    assert_equals(selection.focusOffset, 0, 'focusOffset');
}, 'move forward character');

test(function() {
    var selection = window.getSelection();
    var sample = document.getElementById('sample');
    selection.collapse(sample, 2);
    selection.modify('move', 'backward', 'character');

    var anchor = document.getElementById('nine').firstChild;
    assert_equals(selection.anchorNode, anchor, 'anchorNode');
    assert_equals(selection.anchorOffset, 4, 'anchorOffset');
    assert_equals(selection.focusNode, anchor, 'focusNode');
    assert_equals(selection.focusOffset, 4, 'focusOffset');
}, 'move backward character');
</script>
